
const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

const ListItems = (props) => {
  const { person } = props;
  return (
    <>
      <h1>{person.name}</h1>
      <ul>{listItems}</ul>
    </>
  );
}

export default ListItems;